<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <%@include file="../common/head.jspf" %>
        <link href="/css/user/transaction.css" rel="stylesheet"/>
        <link href="/css/user/changepas.css" rel="stylesheet"/>
        <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <header class="site-mast" >
            <%@include file="../common/head_top_short.jspf" %>
        </header>
        <%@include file="../common/userinfo.jspf" %>
        <div class="tran_content">
            <%@include file="../common/navigate.jspf" %>
            <div class="change_info">

                <div class="info_list">
                    <label>原密码 :</label>
                    <input type="text" value="" class="info_input"/>
                </div>
                <div class="info_list">
                    <label>新密码 :</label>
                    <input type="text" value="" class="info_input" id="tbPassword"/>
                    <label style="margin-left: 5px;">安全程度:</label>
                    <span class="weak" id='pwdLevel_1'></span>
                    <span class="middle" id='pwdLevel_2'></span>
                    <span class="junio" id='pwdLevel_3'></span>
                    <span class="strengh_text">强</span>
                    <p>6-20位字符  只能包含大小写字母、数字以及标点符号（除空格）</p> 
                    <p>大写字母、小写字母、数字和标点符号至少包含2种</p>
                </div>

                <div class="info_list">
                    <label>确认密码 :</label>
                    <input type="text" value="" class="info_input"/>
                    <span class="info_button_confirm">确定</span>
                </div>

            </div>
            <div class="tuijian_banner">
                <label>今日推荐</label>
                <div class="tuijian_info">
                    <div class="item">
                        <div class="secitem">
                            <img src="/img/user/sss.jpg">
                        </div>
                        <div class="secitem1 comname">创意圆形水晶灯</div>
                        <div class="secitem1 cominfo">100元代金券一张，可以叠加</div>
                        <div class="secitem1 comprice">￥1578<label> 门店价 ￥1792</label></div>
                    </div>
                    <div class="item">
                        <div class="secitem">
                            <img src="/img/user/sss.jpg">
                        </div>
                        <div class="secitem1 comname">创意圆形水晶灯</div>
                        <div class="secitem1 cominfo">100元代金券一张，可以叠加</div>
                        <div class="secitem1 comprice">￥1578<label> 门店价 ￥1792</label></div>
                    </div>
                    <div class="item">
                        <div class="secitem">
                            <img src="/img/user/sss.jpg">
                        </div>
                        <div class="secitem1 comname">创意圆形水晶灯</div>
                        <div class="secitem1 cominfo">100元代金券一张，可以叠加</div>
                        <div class="secitem1 comprice">￥1578<label> 门店价 ￥1792</label></div>
                    </div>
                    <div class="item">
                        <div class="secitem">
                            <img src="/img/user/sss.jpg">
                        </div>
                        <div class="secitem1 comname">创意圆形水晶灯</div>
                        <div class="secitem1 cominfo">100元代金券一张，可以叠加</div>
                        <div class="secitem1 comprice">￥1578<label> 门店价 ￥1792</label></div>
                    </div>
                    <div class="item">
                        <div class="secitem">
                            <img src="/img/user/sss.jpg">
                        </div>
                        <div class="secitem1 comname">创意圆形水晶灯</div>
                        <div class="secitem1 cominfo">100元代金券一张，可以叠加</div>
                        <div class="secitem1 comprice">￥1578<label> 门店价 ￥1792</label></div>
                    </div>
                    <div class="item">
                        <div class="secitem">
                            <img src="/img/user/sss.jpg">
                        </div>
                        <div class="secitem1 comname">创意圆形水晶灯</div>
                        <div class="secitem1 cominfo">100元代金券一张，可以叠加</div>
                        <div class="secitem1 comprice">￥1578<label> 门店价 ￥1792</label></div>
                    </div>
                    <div class="item">
                        <div class="secitem">
                            <img src="/img/user/sss.jpg">
                        </div>
                        <div class="secitem1 comname">创意圆形水晶灯</div>
                        <div class="secitem1 cominfo">100元代金券一张，可以叠加</div>
                        <div class="secitem1 comprice">￥1578<label> 门店价 ￥1792</label></div>
                    </div>
                    <div class="item">
                        <div class="secitem">
                            <img src="/img/user/sss.jpg">
                        </div>
                        <div class="secitem1 comname">创意圆形水晶灯</div>
                        <div class="secitem1 cominfo">100元代金券一张，可以叠加</div>
                        <div class="secitem1 comprice">￥1578<label> 门店价 ￥1792</label></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="login_foot">
            <ul>
                <li>关于天下</li>
                <li>市场合作</li>
                <li>商家后台</li>
                <li>常见问题</li>

            </ul>
        </div>
        <script type="text/javascript">
            $('#tbPassword').focus(function () {
                $('#tbPassword').addClass('choosed');
                $('#tbPassword').keyup();
            });

            $('#tbPassword').keyup(function () {
                var __th = $(this);

                if (!__th.val()) {
//                    $('#pwd_tip').hide();
//                    $('#pwd_err').show();
                    Primary();
                    return;
                }
                if (__th.val().length < 6) {
//                    $('#pwd_tip').hide();
//                    $('#pwd_err').show();
                    Weak();
                    return;
                }
                var _r = checkPassword(__th);
                if (_r < 1) {
//                    $('#pwd_tip').hide();
//                    $('#pwd_err').show();
                    Primary();
                    return;
                }

                if (_r > 0 && _r < 2) {
                    Weak();
                } else if (_r >= 2 && _r < 4) {
                    Medium();
                } else if (_r >= 4) {
                    Tough();
                }

//                $('#pwd_tip').hide();
//                $('#pwd_err').hide();
            });



            function Primary() {
                $(".strengh_text").text("填写密码");
//                $('#pwdLevel_1').attr('class', 'ywz_zhuce_huixian');
//                $('#pwdLevel_2').attr('class', 'ywz_zhuce_huixian');
//                $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
            }

            function Weak() {
                $('#pwdLevel_2').removeClass('passlevel');
                $('#pwdLevel_3').removeClass('passlevel');
                $('#pwdLevel_1').addClass('passlevel');
                $(".strengh_text").text("弱");
//                $('#pwdLevel_2').attr('class', 'ywz_zhuce_huixian');
//                $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
            }

            function Medium() {
                $('#pwdLevel_3').removeClass('passlevel');
                $('#pwdLevel_1').addClass('passlevel');
                $('#pwdLevel_2').addClass('passlevel');
                $(".strengh_text").text("中");
//                $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
            }

            function Tough() {
                $('#pwdLevel_1').addClass('passlevel');
                $('#pwdLevel_2').addClass('passlevel');
                $('#pwdLevel_3').addClass('passlevel');
                $(".strengh_text").text("强");
            }




            function checkPassword(pwdinput) {
                var maths, smalls, bigs, corps, cat, num;
                var str = $(pwdinput).val()
                var len = str.length;

                var cat = /.{16}/g
                if (len == 0)
                    return 1;
                if (len > 16) {
                    $(pwdinput).val(str.match(cat)[0]);
                }
                cat = /.*[\u4e00-\u9fa5]+.*$/
                if (cat.test(str)) {
                    return -1;
                }
                cat = /\d/;
                var maths = cat.test(str);
                cat = /[a-z]/;
                var smalls = cat.test(str);
                cat = /[A-Z]/;
                var bigs = cat.test(str);
                var corps = corpses(pwdinput);
                var num = maths + smalls + bigs + corps;

                if (len < 6) {
                    return 1;
                }

                if (len >= 6 && len <= 8) {
                    if (num == 1)
                        return 1;
                    if (num == 2 || num == 3)
                        return 2;
                    if (num == 4)
                        return 3;
                }

                if (len > 8 && len <= 11) {
                    if (num == 1)
                        return 2;
                    if (num == 2)
                        return 3;
                    if (num == 3)
                        return 4;
                    if (num == 4)
                        return 5;
                }

                if (len > 11) {
                    if (num == 1)
                        return 3;
                    if (num == 2)
                        return 4;
                    if (num > 2)
                        return 5;
                }
            }

            function corpses(pwdinput) {
                var cat = /./g
                var str = $(pwdinput).val();
                var sz = str.match(cat)
                for (var i = 0; i < sz.length; i++) {
                    cat = /\d/;
                    maths_01 = cat.test(sz[i]);
                    cat = /[a-z]/;
                    smalls_01 = cat.test(sz[i]);
                    cat = /[A-Z]/;
                    bigs_01 = cat.test(sz[i]);
                    if (!maths_01 && !smalls_01 && !bigs_01) {
                        return true;
                    }
                }
                return false;
            }




        </script>
    </body>
</html>
